<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>layer分页</title>
</head>
<body>

	<table>
		<thead>
			<tr>
				<td>序号</td>
				<td>姓名</td>
			</tr>
		</thead>
		<tbody id="userTable">
		</tbody>
	</table>

	<div id="layerPage"></div>

</body>
<script id="dataTemplate" type="text/template">
		<tr>
			<td>{{index}}</td>
			<td>{{name}}</td>
		</tr>
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/front/laypage/laypage.js"></script>
<script type="text/javascript">
	var $user = $("#userTable");
	//列表模板
	var template = $("#dataTemplate").html();

	$(function() {
		var param = {
			"name" : "admin"
		};
		loadUser("demo/page.do", 1, param);
	});
	function loadUser(url, pageNo, param) {
		$.ajax({
			type : 'get',
			url : "${pageContext.request.contextPath}/" + url + "?pageNo=" + pageNo,
			data : param,
			dataType : 'json',
			success : function(obj) {
				$user.empty();
				var dataHtml = "";
				$.each(obj.data.list, function(i, item) {
					pageNo = pageNo || 1;
					var templateParam = {
						"index" : i + 1 + (pageNo - 1) * obj.data.pageSize,
						"name" : item.name
					}
					//用模板生成列表数据
					dataHtml += U.template(template, templateParam);
				});
				$user.append(dataHtml);
				laypage({
					cont : 'layerPage', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
					pages : obj.data.totalPage, //通过后台拿到的总页数
					curr : pageNo || 1, //当前页
					skip : true, //是否开启跳页
					skin : '#63B8FF',
					groups : 8, //连续显示分页数，默认是5
					jump : function(obj, first) { //触发分页后的回调
						if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
							loadUser(url, obj.curr, param);
						}
					}
				});
			}
		});
	};
</script>

</html>